import React from 'react'
import { makeStyles } from '@material-ui/core/styles';
import Alert from '@material-ui/lab/Alert';
import DataGrid, { SelectColumn } from 'react-data-grid';
import { loc, is_empty } from 'sui';

const useGlobStyle = makeStyles(theme => ({
    root: {
        backgroundColor: '#3082ce',
        color: 'white',
        '&:hover .rdg-cell': {
            backgroundColor: '#2a6cb0',
            color: 'white',
        },
    }
}));

const EmptyRowsRenderer = () => (
    <div style={{ textAlign: 'center', gridColumn: '1/-1' }}>
        <Alert severity="info">{loc("l_536")}</Alert>
    </div>
);

/* col: [
 *   {name: "序号", key: 'index', width: 40, frozen: true},
 *   {name: "操作", key: 'e_opt', width: 180, frozen: true, formatter: (props) => {
 *      const d = props.row;
 *      return ();
 *   }},
 * ]
 *
 * row : [
 *   {index: '1', sn: "abc"},
 *   {index: '2', sn: "bcd"},
 * ]
 *
 * const [select, hselect] = useState(new Set());
 * const hget = (d) => d.uid;
 *
 * const [egroup, hegroup] = useState(new Set());
 *
 * hclick = (row, col) => {}
 *
 * hlight = (row) => row.id.includes('7') ? highlightClassname : undefined)}
*/
const GridTable = ({ col, row, high, sumrow, rowHeight, group, hgroup, egroup, hegroup, gref, select, hselect, hget, hlight, hclick }) => {
    const classes = useGlobStyle();

    if (is_empty(col)) {
        return null;
    }

    col.forEach(d => {
        d["resizable"] = true;

        if (d.key === "e_opt") {
            return;
        }

        if (d.formatter) {
            return;
        }

        d["editor"] = ({ row, column }) => <input className="grid-txt" readOnly value={"" + row[column.key]} ref={e => {
            if (e) {
                e.select();
            }
        }}/>;
    });

    const getRow = () => {
        if (is_empty(row)) {
            return [];
        }

        return row;
    };

    return (
        <DataGrid
            rowKeyGetter={hget}
            ref={gref}
            rowHeight={rowHeight}
            noRowsFallback={<EmptyRowsRenderer/>}
            columns={col}
            rows={getRow()}
            summaryRows={sumrow}
            groupBy={group}
            rowGrouper={hgroup}
            expandedGroupIds={egroup}
            onExpandedGroupIdsChange={hegroup}
            selectedRows={select}
            onSelectedRowsChange={hselect}
            rowClass={v => {
                if (hlight && hlight(v)) {
                    return classes.root;
                }

                return null;
            }}
            onRowClick={hclick}
            style={{ height: high + "px" }}/>
    );
};

const trans_col = (col) => {
    if (is_empty(col)) {
        return [];
    }

    return col.map(d => {
        const ret = {
            key: d.field,
            name: d.title,
        };

        if (d.width) {
            ret["width"] = d.width;
        }

        return ret;
    });
};

/* lst: ["a", "b"]
 *
 * col: [
 *     {sn: "a", name: "aa"},
 *     {sn: "b", name: "bb"},
 * ]
*/
const filter_list = (lst, col) => {
    const ret = [];
    const set = new Set();

    if (!is_empty(lst)) {
        lst.forEach(d => {
            if (set.has(d)) {
                return;
            }

            ret.push(d);
            set.add(d);
        });
    }

    if (!is_empty(col)) {
        col.forEach(d => {
            if (set.has(d.sn)) {
                return;
            }

            ret.push(d.sn);
            set.add(d.sn);
        });
    }

    return ret;
}

export {filter_list, SelectColumn, trans_col, GridTable};
